<template>
<div class="left">
<el-row class="tac">

  <el-col :span="50" >
    <el-menu
      :uniqueOpened="true"
      default-active="this.$router.path"
      router
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >
      

      <el-menu-item index="/hrMain/add">
        <i class="el-icon-plus"></i>
        <template #title>添加员工</template>
      </el-menu-item >
      <el-menu-item index="/hrMain/search">
        <i class="el-icon-zoom-in"></i>
        <template #title>搜索员工</template>
      </el-menu-item>
      <el-menu-item index="/hrMain/manage">
        <i class="el-icon-user-solid"></i>
        <template #title>管理员工</template>
      </el-menu-item>

      
      
      
      
    </el-menu>
  </el-col>
</el-row>
</div>
</template>

<script>
  export default {
    name:"left",
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style >
/* .tac{
  height: 100%;
} */
.el-col{
  height: 100%;
  width:100%
}
.el-row {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 100vh;
        height: 100%;
        width:100%;
    }
.el-menu{
    height: 100%;
    width: 100%;
}
.left{
  overflow-x:hidden;
  height: 100%;
}


</style>
